<template>
    <div class="box-view">
          <div class="title">基础信息</div>
            <el-divider></el-divider>
          <el-form ref="formName" label-width="110px">
                   <el-form-item v-for="(item,index) in columnList" :label="item.label+':'" :key="index" style="width:250px">
                        张三能否
                    </el-form-item>
          </el-form>
          <div class="title">账户信息</div>
            <el-divider></el-divider>
          <el-form ref="formName" label-width="110px">
                <el-form-item  label="银行账号:" style="width:300px">
                        1645645
                </el-form-item>
                <el-form-item  label="开户银行:" style="width:300px">
                        1645645
                </el-form-item>
                <el-form-item  label="开户行地址:" style="width:300px">
                        1645645
                </el-form-item>
          </el-form>
             <div class="title">表具信息</div>
            <el-divider></el-divider>
              <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="所属专业"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="表具类型"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="业务状态"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="开启状态"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="用能性质"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="操作"
                   />
            </el-table>
            <div class="title">合同信息</div>
            <el-divider></el-divider>
            <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="所属专业"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="合同编号"
                   />
                    <el-table-column         
                    prop="name" 
                     align="center"
                    label="合同签订日期"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="合同类型"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="用能性质"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="操作"
                   />
            </el-table>
            <div class="title">综合信息</div>
            <el-divider></el-divider>
             <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="开户记录" name="first"> 
                <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="开户行名称"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="客户类型"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="开户日期"
                   />
            </el-table>
            </el-tab-pane>
            <el-tab-pane label="过户记录" name="second">
               <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="承接方名称"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="客户类型"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="过户日期"
                   />
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="更换记录" name="third">

              <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="原表表号"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="新表表号"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="原表读数"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="新表读数"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="更换时间"
                   />
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="用水记录" name="fourth">
                <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="客户名称"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="用水时间"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="用水量"
                   />
               </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修记录" name="five">
               <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}">
                <el-table-column         
                    prop="name" 
                     align="center"
                    label="表具表号"
                   />
                 <el-table-column         
                    prop="name" 
                     align="center"
                    label="水表位置"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="维修时间"
                   />
                   <el-table-column         
                    prop="name" 
                     align="center"
                    label="维修人"
                   />
               </el-table>
            </el-tab-pane>
          </el-tabs>
    </div>
</template>
<script>
import * as echarts from 'echarts';

  export default {
    data() {
      return {
        columnList:[
          {label:'客户户号',prop:'name',iStrue:false},
          {label:'客户名称',prop:'name',iStrue:true},
          {label:'所属项目',prop:'name',iStrue:true},
          {label:'性别',prop:'name',iStrue:true},
          {label:'联系电话',prop:'name',iStrue:true},
          {label:'身份证号',prop:'name',iStrue:true},
          {label:'客户类型',prop:'name',iStrue:true},
          {label:'区域',prop:'name',iStrue:true},
          {label:'详细地址',prop:'name',iStrue:true},
          {label:'所属项目',prop:'name',iStrue:true}
        ], 
       tableData:[],
       activeName:'first'
      };
    },
    methods: {

    },
  }
</script>
<style scoped>
.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}
.title{
    padding-top:20px;
    color:#333;
    font-size:16px;
}
.el-divider--horizontal{
    margin:10px 0;
}
</style>